<template>
    <div class="all">
        <div class="content">
            <h3>个人信息</h3>
            <table>
                <tbody>
                    <tr >
                        <td>*姓名</td>
                        <td>
                            <input type="text" :placeholder="`${ user.name }`">
                        </td>
                    </tr>
                    <tr >
                        <td>*编号</td>
                        <td>
                            <input type="text" :placeholder="`${ user.id }`">
                        </td>
                    </tr>
                    <tr >
                        <td>*性别</td>
                        <td style="display: flex; align-items: center; gap: 20px;">
                             <label>
                                <input type="radio" name="gender" v-model="user.gender" :value="0" :checked="user.gender===0">男
                            </label>
                             <label>
                                <input type="radio" name="gender" v-model="user.gender" :value="1" :checked="user.gender===1">女
                             </label>
                        </td>
                    </tr>
                    <tr >
                        <td>*手机号</td>
                        <td>
                            <input type="text" :placeholder="`${ user.phone }`">
                        </td>
                    </tr>
                    <tr >
                        <td>*学校</td>
                        <td>
                            <input type="text" :placeholder="`${ user.school }`">
                        </td>
                    </tr>
                    <tr >
                        <td>*专业</td>
                        <td>
                            <input type="text" :placeholder="`${ user.major }`">
                        </td>
                    </tr>
                    <tr >
                        <td>*人员属性</td>
                        <td style="display: flex; align-items: center; gap: 20px;">
                            <label>
                                <input type="radio" name="type" v-model="user.type" :value="0" :checked="user.type===0">群众
                            </label>
                            <label>
                            <input type="radio" name="type" v-model="user.type" :value="1" :checked="user.type===1">团员
                            </label>
                            <label>
                            <input type="radio" name="type" v-model="user.type" :value="2" :checked="user.type===2">党员
                            </label>
                        </td>
                    </tr>
                </tbody>
            </table>
            <input type="button" value="提交" @click="btnsub">
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
let user = ref({
    name: '李华',       // 姓名
    id: 1,         // 编号
    gender: 0,      // 性别 0 男 1 女
    phone: '13800138000', // 手机号
    school: '北京大学', // 学校
    major: '计算机科学', // 专业
    type: 0       // 人员属性 0群众 1 团员 2 党员
})

function btnsub(){
    alert('保存提交成功')
}
</script>
<style scoped>
.all{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; 
    background-color: var(--bg-accent);
}
.content{
    width: 90%;
    height: 60%;
    margin-top: 30px;
    background-color: var(--white);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}
.content>h3 {
    color: var(--text-primary);
    font-size: var(--font-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-lg);
}
table,tbody,tr,td{
    border-collapse: collapse;
}
tr{
    border-bottom: 1px solid var(--border-color);
}
table{
    width: 100%;
    margin-top: 25px;
}
tr>td:nth-child(1) {
    color: var(--text-primary);
    font-weight: 500;
    padding: var(--spacing-sm) 0;
    width: 15%;
    white-space: nowrap;
}
tr>td:nth-child(2){
    width: 85%;
    height: 50px;
    padding: var(--spacing-sm) 0;
    white-space: nowrap;
}
input[type="text"]{
    height: 30px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-small);
    padding: 0 var(--spacing-sm);
    font-size: var(--font-md);
    color: var(--text-primary);
    transition: all 0.3s ease;
}
input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
}
input[type="text"]::placeholder {
    color: var(--text-secondary);
}
input[type="button"]{
    width: 200px;
    height: 45px;
    border: none;
    border-radius: var(--radius-large);
    font-size: var(--font-lg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    margin-top: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="button"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}
label {
    color: var(--text-primary);
    font-size: var(--font-md);
    margin-right: var(--spacing-md);
    cursor: pointer;
}
input[type="radio"] {
    margin-right: var(--spacing-xs);
    accent-color: var(--primary-color);
}
</style>